<template>
	<view class="userLayout">
		<view class="userInfo">
			<view class="avatar">
				<image src="/static/avatar.jpg" mode="aspectFill"></image>
			</view>
			<button type="primary" class="loginBtn">登录</button>
			<view class="username">坂田银时</view>
		</view>

		<view class="section">
			<view class="list">
				<navigator url="">
					<view class="row">
						<view class="left">
							<uni-icons type="download-filled"></uni-icons>
							<view class="text">我的下载</view>
						</view>
						<view class="right">
							<view class="text">99</view>
							<uni-icons type="right"></uni-icons>
						</view>
					</view>
				</navigator>
				<navigator url="">
					<view class="row">
						<view class="left">
							<uni-icons type="chatbubble-filled"></uni-icons>
							<view class="text">我的评分</view>
						</view>
						<view class="right">
							<view class="text">99</view>
							<uni-icons type="right"></uni-icons>
						</view>
					</view>
				</navigator>
				<navigator url="">
					<view class="row">
						<view class="left">
							<uni-icons type="star-filled"></uni-icons>
							<view class="text">我的收藏</view>
						</view>
						<view class="right">
							<view class="text">99</view>
							<uni-icons type="right"></uni-icons>
						</view>
					</view>
				</navigator>
			</view>
		</view>

		<view class="section">
			<view class="list">
				<navigator url="">
					<view class="row">
						<view class="left">
							<uni-icons type="notification-filled"></uni-icons>
							<view class="text">订阅更新</view>
						</view>
						<view class="right">
							<uni-icons type="right"></uni-icons>
						</view>
					</view>
				</navigator>
				<navigator url="">
					<view class="row">
						<view class="left">
							<uni-icons type="flag-filled"></uni-icons>
							<view class="text">常见问题</view>
						</view>
						<view class="right">
							<uni-icons type="right"></uni-icons>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.userLayout {

		// 用户信息
		.userInfo {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 50rpx 0;

			// 头像
			.avatar {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			// 登录按钮
			.loginBtn {
				margin-top: 10rpx;
				width: 140rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				font-size: 30rpx;
				font-weight: 600;
			}

			// 用户名
			.username {
				margin-top: 10rpx;
				font-size: 35rpx;
			}
		}

		// 导航栏
		.section {
			margin: 50rpx auto;
			width: 690rpx;
			border: 1px solid #eeeeee;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.2);
			border-radius: 10rpx;
			overflow: hidden;

			// 导航栏列表
			.list {

				// 导航栏列表每一项
				navigator {
					border-bottom: 1px solid #eeeeee;

					// 导航栏列表最后一项
					&:last-child {
						border-bottom: 0;
					}

					// 导航栏列表每一项里边的样式
					.row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 30rpx;
						height: 100rpx;
						background: white;

						// 左侧
						.left {
							display: flex;
							align-items: center;

							.text {
								margin-left: 20rpx;
							}
						}

						// 右侧
						.right {
							display: flex;
							align-items: center;

							.text {
								font-size: 28rpx;
								color: #666666;
								margin-right: 10rpx;
							}
						}
					}
				}
			}
		}
	}
</style>

<script setup>

</script>